<ui:composition template="/templates/default.xhtml" 
				xmlns:ui="http://java.sun.com/jsf/facelets"
				xmlns:h="http://java.sun.com/jsf/html"
			    xmlns:f="http://java.sun.com/jsf/core"
			    xmlns:c="http://java.sun.com/jstl/core"
			    xmlns:t="http://myfaces.apache.org/tomahawk"
			    xmlns:sec="http://www.springframework.org/security/facelets/tags">
	
	<ui:param name="hideTabBar" value="true" />		    
	
	<ui:define name="title">OpenHDS - Update</ui:define>

    <ui:define name="display">
        <style>
            .update-individual-table {
                border-collapse: collapse;
                width:100%;
                font-size:1em;
            }

            .update-individual-table th {
                background-color: #A7C942;
                text-align:left;
                color: white;
                padding:5px 7px 4px;
            }

            .update-individual-table td {
                border:1px solid #98BF21;
                padding:5px 5px 5px;
            }

            .update-individual-table a {
                text-decoration:underline;
            }

            .update-individual-table .alt {
                background-color:#CCC;
            }

            .update-individual-table .select-col {
                width:15%;
                text-align:center;
            }

            .list-individual-operation-table {
                border-collapse: collapse;
                border:1px solid #AAA;
                width:100%;
            }
            
            .selectIndivBtn {
            	width:10em;
            	margin-right:.5em;
            }
            
            .selectBtnCell {
            	border-bottom:1px solid #888;
            	padding-bottom:1em;
            }
            
            .shortcut-container {
            	background-color:#EEE;
            	border:1px solid #CCC;
            	position:absolute;
            	right:1em;
            	top:0;
            	padding:.3em;
            }
            
            .shortcut-list {
            	margin:0 0 0 .5em;
            	padding:0;
            	list-style-position:inside;
            }
        </style>
		<sec:ifNotGranted roles="CREATE_ENTITY">
			<h1>#{msg.accessDenied}</h1>
			<p>#{msg.accessDeniedException}</p>
		</sec:ifNotGranted>
        	
       	<sec:ifAllGranted roles="ACCESS_UPDATE">
			<div style="position:relative">	
			
		  <h:outputText value="#{navController.breadcrumbTrail}" />
				
          <h1><h:outputText value="#{msg.updateName}" /></h1>
          <h:messages id="errors" globalOnly="true" />
          <h:form id="form" prependId="false">
              <table>
                  <tr>
                      <td>#{msg.visitId}:</td>
                      <td>
                          <h:inputText styleClass="visit" autocomplete="off" id="visitId" disabled="#{updateBean.currentVisit != null}" value="#{updateBean.currentVisit}" converter="#{visitExtIdConverter}" />
                      </td>
                      <td colspan="3">
                          <h:commandButton rendered="#{updateBean.currentVisit == null}" action="setVisit" value="#{msg.lblSelect}" />
                          <h:commandButton rendered="#{updateBean.currentVisit == null}" immediate="true" value="#{msg.lblCreate}" action="newVisit" />
                      </td>
                  </tr>
                  <tr>
                      <td>#{msg.locationName}:</td>
                      <td><h:inputText disabled="true" value="#{updateBean.locationName}" /></td>
                  </tr>
                  <tr>
                      <td>#{msg.updateDate}:</td>
                      <td><h:inputText disabled="true" value="#{updateBean.currentVisit.visitDate}" converter="#{calendarConverter}" /></td>
                  </tr>
              </table>
              <br />
              <c:if test="#{flowScope.updating}">
				<div class="shortcut-container">
					<strong>#{msg.updateShortcutKeys}</strong>
					<ul class="shortcut-list">
						<li>c - #{msg.updateShortcutClear}</li>
						<li>p - #{msg.updateShortcutPO}</li>
						<li>d - #{msg.updateShortcutDeath}</li>
						<li>i - #{msg.updateShortcutIM}</li>
						<li>e - #{msg.updateShortcutPRO}</li>
						<li>r - #{msg.updateShortcutRel}</li>
						<li>m - #{msg.updateShortcutMem}</li>
						<li>o - #{msg.updateShortcutOM}</li>
						<li>a - #{msg.updateShortcutAttr}</li>
						<li>f - #{msg.updateShortcutFinish}</li>
					</ul>
				</div>
                  <h3>#{msg.updateListIndividuals}</h3>
                  <table class="list-individual-operation-table">
                      <tr style="height:50px">
                          <td rowspan="6" style="width:60%" valign="top">
                              <c:if test="#{updateBean.individualsAtLocation != null}">
                                  <h:dataTable styleClass="update-individual-table" value="#{updateBean.individualsAtLocation}"
                                               var="indiv" width="100%" rowClasses=",alt" columnClasses=",,,,,select-col">
                                      <h:column>
                                          <f:facet name="header">
                                              <h:outputText value="#{msg.individualId}" />
                                          </f:facet>
                                          <h:outputText value="#{indiv.extId}" />
                                      </h:column>
                                      <h:column>
                                          <f:facet name="header">
                                              <h:outputText value="#{msg.individualFullName}" />
                                          </f:facet>
                                          <h:outputText value="#{indiv.firstName} #{indiv.lastName}" />
                                      </h:column>
                                      <h:column>
                                          <f:facet name="header">
                                              <h:outputText value="#{msg.individualDob}" />
                                          </f:facet>
                                          <h:outputText value="#{indiv.dob}" converter="#{calendarConverter}" />
                                      </h:column>
                                      <h:column>
                                          <f:facet name="header">
                                              <h:outputText value="#{msg.individualGender}" />
                                          </f:facet>
                                          <h:outputText value="#{indiv.gender}" />
                                      </h:column>
                                      <h:column>
                                          <f:facet name="header">
                                              <h:outputText value="#{msg.updateLastEvent}" />
                                          </f:facet>
                                          <h:outputText value="#{individualService.jsfcrud_method.getLatestEvent.jsfcrud_params[indiv].jsfcrud_invoke}" />
                                      </h:column>
                                      <h:column>
                                          <f:facet name="header">

                                          </f:facet>
                                          <h:commandLink immediate="true" actionListener="#{updateBean.changeIndividual}" value="#{msg.lblSelect}" action="setIndividual">
                                              <f:param name="indivId" value="#{indiv.uuid}" />
                                              <f:param name="indivExtId" value="#{indiv.extId}" />
                                          </h:commandLink>
                                      </h:column>
                                  </h:dataTable>
                              </c:if>
                          </td>
                          <td colspan="2" class="selectBtnCell">
							#{msg.updateSelectedIndividual} <h:inputText id="selectedIndiv" binding="#{updateBean.selectedIndivInput}" />
							<div style="display:inline-block">
								<h:commandButton id="selectBtn" styleClass="selectIndivBtn" immediate="true" actionListener="#{updateBean.selectBtnListener}" value="#{msg.lblSelect}" />
								<h:commandButton id="clearBtn" styleClass="selectIndivBtn" immediate="true" actionListener="#{updateBean.clearSelectedIndividual}" value="#{msg.lblClear}" />
							</div>
                          </td>
                      </tr>
                      <tr>
                          <td align="right"><h:commandButton id="pregOutcomeBtn" immediate="true" styleClass="update-btn" action="newPregnancyOutcome" value="#{msg.updatePregOut}" /></td>
                          <td><h:commandButton id="relationshipBtn" immediate="true" styleClass="update-btn" value="#{msg.navBarRelationship}" action="newRelationship" /></td>
                      </tr>
                      <tr>
                          <td align="right"><h:commandButton id="deathBtn" immediate="true" styleClass="update-btn" value="#{msg.navBarDeath}" action="newDeath" /></td>
                          <td><h:commandButton id="membershipBtn" immediate="true" styleClass="update-btn" value="#{msg.navBarMembership}" action="newMembership" /></td>
                      </tr>
                      <tr>
                          <td align="right"><h:commandButton id="inMigBtn" immediate="true" styleClass="update-btn" value="#{msg.navBarInMigration}" action="newInmigration" /></td>
                          <td><h:commandButton id="outMigBtn" immediate="true" styleClass="update-btn" value="#{msg.navBarOutMigration}" action="newOutMigration" /></td>
                      </tr>
                      <tr>
                          <td align="right"><h:commandButton id="pregObsBtn" immediate="true" styleClass="update-btn" value="#{msg.updatePregObserv}" action="newPregObserv" /></td>
                          <td></td>
                      </tr>
                      <tr>
                          <td colspan="2" valign="top" align="center" style="padding-top:20px;"><h:commandButton id="finishBtn" immediate="true" styleClass="update-btn" value="#{msg.lblFinish}" action="finish" /></td>
                      </tr>
                  </table>
              </c:if>
			<script>
				// handles shortcut keys
				(function() {

					var inSelectedIndivText = false;
					var pressedClear = false;
					var originalIndivText = "";
					
					// dont listen for keyboard events unless the user has
					// input a valid visit
					if ($("#visitId").val().length == 0) {
						$("#visitId").focus();
						return;
					}
					
					$(document).keypress(function(event) {
						if (inSelectedIndivText) {
							return;
						}
						
						switch(event.which) {
							case 112: // r - Pregnancy Outcome
								$("#pregOutcomeBtn").click();
								break;
							case 100: // d - death
								$("#deathBtn").click();
								break;
							case 105: // i - in migration
								$("#inMigBtn").click();
								break;
							case 101: // e - pregnancy observation
								$("#pregObsBtn").click();
								break;
							case 114: // r - relationship
								$("#relationshipBtn").click();
								break;
							case 109: // m - membership
								$("#membershipBtn").click();
								break;
							case 111: // o - outmigration
								$("#outMigBtn").click();
								break;
							case 97: // a - attributes
								$("#attrBtn").click();
								break;
							case 102: // f - finish
								$("#finishBtn").click();
								break;
							case 99: // c - clear selected individual
								pressedClear = true;
								event.preventDefault(); // don't let the c get filled in text box
								$("#selectedIndiv").focus();								
								break;
						}
					});

					$("#selectedIndiv").focus(function(event) {
						// workaround for IE issue where focus method is called twice
						// refer to: http://bugs.jquery.com/ticket/6705
						if (inSelectedIndivText) {
							return;
						}
						
						// when the user is typing in the selected individual textbox
						// temporarly disabled the keyboard event listener to avoid
						// firing off click events
						inSelectedIndivText = true;
						originalIndivText = $("#selectedIndiv").val();

						if (pressedClear) {
							// only clear the text box when the user explicity uses the clear shortcut
							// otherwise the text will get cleared when the text box gets focus from
							// tab or by clicking it with the mouse, which I think is not intuitive
							// behavior
							$("#selectedIndiv").val('');
							pressedClear = false;
						}
					}).blur(function() {
						inSelectedIndivText = false;

						var input = $("#selectedIndiv").val();

						if (input.length == 0 || input == originalIndivText) {
							$("#selectedIndiv").val(originalIndivText);
						} else {
							$("#selectBtn").click();
						}
					}).keydown(function(event) {
						// 13 == Enter Key
						if (event.which == 13) {
							event.preventDefault();
							event.stopPropagation();
							$("#selectBtn").click();
						}
					});
				})();
			</script>
          </h:form>
          </div>
		</sec:ifAllGranted>
	</ui:define>
</ui:composition>